<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // Model 模型数据
        msg='hello';

        // ViewModel 视图模型
        window.onload=function(){
            var h4Dom=document.getElementById('h4Dom');
            var inputDom=document.getElementById('inputDom');

            h4Dom.innerHTML=msg; // Model————>View
            inputDom.value=msg;

            // 为dom对象进行动态的事件绑定
            // inputDom.addEventListener('change',function(){ // change事件：当文本框的值发生变化并失去焦点时触发
            inputDom.addEventListener('input',function(){ // input事件：当文本框的值发生变化时触发
                // console.log(this); // this表示事件源：即当前触发事件的dom对象
                msg=this.value; // View————>Model
                h4Dom.innerHTML=msg;
            });
        }

    </script>
</head>
<body>
    <!-- View 视图 -->
    <div>
        <h4 id="h4Dom"></h4>
        <input type="text" id="inputDom">
    </div>
</body>
</html>